<template>
	<view class="technicianDetail">
		<an-nav-bar title="技师详情" :isBg="isBg" :navHeight="false"> </an-nav-bar>
		<view class="top" id="technician">
			<image class="back" src="/static/back.jpg" mode=""></image>
			<view class="tips flex">下单付款后技师会主动联系您哦～</view>
			<view class="inner">
				<view class="info flex">
					<view class="avatar flex_center">
						<image :src="$common.binImage(technicianDetail.headImg,'','','/static/image/logo.png')" mode="aspectFill"></image>
						
					</view>
					<view class="right">
						<view class="name flex">
							<view class="uni-label-pointer">{{technicianDetail.nickName}}</view>
							<!-- 距离{{$common.distance(technicianDetail.distance)}} -->
							<view class="flex distance">{{technicianDetail.jobTitle}}</view>
						</view>
						<view class="contrast">人脸对比相似度{{technicianDetail.headAuthRate}}</view>
						<view class="tag flex">
							<!-- <text> 资质认证 </text> -->
							<text v-if="technicianDetail.isAuth"> 实名认证 </text>
							<text v-if="technicianDetail.isHeadAuth"> 头像认证 </text>
							<text v-if="technicianDetail.videoAuth"> 视频认证 </text>
						</view>
						<view class="flex" @click="goPosition">
							<view class="location flex">查看技师位置</view>
							<view v-if="technicianDetail.reliableStatus" class="kaopu"></view>
						</view>
					</view>
					<view class="rightBtns">
						
					</view>
				</view>
				<view class="new_tabbar flex">
					<view class="uni-label-pointer" :class="tabIndex == 1?'check':''" @click="tabIndex = 1">个人资料</view>
				</view>
			</view>
		</view>
		
		<view v-show="tabIndex == 1">
			<view class="technician_datas">
				
				<view class="album" v-if="technicianDetail.recentPhoto">
					<view class="photos">
						<view class="img" v-for="(img,idx) in technicianDetail.recentPhoto" :key="idx" @click="$common.previewImage(technicianDetail.recentPhoto,idx)">
							<image v-if="img" :src="$common.binImage(img)" mode="aspectFill"></image>
						</view>
					</view>
					<view class="introduce flex_sw">
						<view class="text " :class="{'all':allIntroduction}">自我介绍：{{technicianDetail.selfIntroduction}}
						</view>
						<span @click="allIntroduction = !allIntroduction">{{allIntroduction? '关闭':'展开'}}</span>
					</view>
					<view class="lbls flex_sw">
						<span class="flex">平台担保</span>
						<span class="flex">官方认证</span>
						<span class="flex">收费透明</span>
						<span class="flex">爽约包退</span>
					</view>
				</view>
			</view>
			<view class="reportTips">为了保障用户权益，下单后如有服务者或服务商有涉嫌欺诈消费者，请直接联系平台投诉，投诉电话：4008-620-602</view>
			<view class="tabbar flex_sw">
				<view class="label-pointer" :class="{'check':tabId == 0}" @click="onTabr(0)">服务项目</view>
				<view class="label-pointer" :class="{'check':tabId == 1}" @click="onTabr(1)">下单须知</view>
				<!-- <view class="label-pointer" :class="{'check':tabId == 2}" @click="onTabr(2)">推荐技师</view> -->
			</view>
			<view v-if="tabId == 0" class="product">
				<view class="item flex" v-for="(item,index) in technicianList" :key="index">
					<view class="img" @click="gotoUrl(`/pages/projectDetails/projectDetails?id=${item.id}`)">
						<image :src="$common.binImage(item.projectImg)" mode="aspectFill"></image>
					</view>
					<view class="info" @click="gotoUrl(`/pages/projectDetails/projectDetails?id=${item.id}`)">
						<view class="name flex">{{item.projectName}}</view>
						<view class="time">服务时长：{{item.serviceTime}}分钟</view>
						<view class="price">
							<span>{{item.sellPrice}}</span>
							元/次
						</view>
						<view class="count">已售{{item.sellNum}}份</view>
					</view>
					<button class="btn" @click="placeOrder(item)">下单</button>
				</view>
			</view>
			<view v-if="tabId == 1" class="notice allNotice">
				<view class="title">下单须知</view>
				<view class="text">
					1、仅提供专业正规的推拿按摩服务，对于客人不正当的行为和要求，商家和技师有权拒绝服务，并保留诉诸法律的权利，对于客人恶意下单、恶意差评、恶意投诉的行为，商家或平台将对客人拉黑处理，并保留诉诸法律的权利。

					2、往返路费由平台代收，白天（08:00~20:00）直线距离3公里范围内免收往返路费，往返路费由打车软件估算，如有异议，以打车凭证为准，多退少补。商家或技师如有额外索取路费可以向平台举报。

					3、客人下单付款后两分钟内商家不能接单，有问题需要咨询的可主动拨打商家电话（订单页面可见）咨询。商家将在客人下单付款后10分钟内确认是否接单，如商家未接单，客人可主动联系商家催单，或选择申请退款，订单款项将原路返回客人账户。

					4、客人下单付款后，商家会联系技师和客人确认订单，对接双方都没有问题才会确认接单，如客人有开票需求，请在商家接单前与商家对接确认，商家一旦接单，客人和商家都不能随意取消订单。

					5、接单后需要取消服务的，将进行扣款或退款处理，订单视为服务完成。
					　5.1、因商家原因要取消服务的，订单款项由商家全额退还给客人。
					　5.2、因客人原因要取消服务的，如技师未出发，扣除项目费用的12%作为手续费，剩余款项由商家退还客人。 　
					　5.3、因客人原因要取消服务的，如技师已出发，扣除项目费用的12%作为手续费，扣除技师往返路费，扣除技师误工费50元，剩余款项由商家退还客人。

					6、商家和技师有权拒绝客人加微信的要求，如客人需要联系商家或技师，可通过电话联系。如商家在未征得客人同意的情况下更换其他技师为客人服务，客人有权申请全额退款。如客人对技师或服务不满意，需要在服务开始前拒绝服务，服务开始后，客人不能以任何理由要求退款。

					7、若技师到达指定预约地点，因客人原因无法开始服务，技师将在等待30分钟后，自行离开视为服务完成，不做任何退款处理；在服务过程中，若因客人原因不得不提前结束服务，将视同本次服务完成，不做任何退款处理。

					8、平台所有服务费用和往返路费都是明码标价，如技师索要小费、路费或其它额外费用，客人有权拒绝（客人主动给予的除外），如遇服务质量问题，或技师未完成服务就提前离开（征得客人同意的除外），可保留相关证据联系商家或平台进行投诉。

					9、为保障你的权益，所有费用请通过平台支付。私自联系商家或技师进行交易的行为，发生财产损失或人身安全等问题与平台无关，后果自负。</view>
				
			</view>
			
		</view>
		
		<view v-show="tabIndex == 2">
			<view class="technician_datas">
				
			</view>
		</view>
		
		<lw-message ref="lwMessage" />
		
		<VipAuth ref="refVipAuth" />
		<Gift :technicianId="technicianDetail.id" ref="refGift" />
	</view>
</template>

<script>
	
	import VipAuth from "@/components/vipAuth";
	import Gift from "@/components/gift";
	import indexConfig from '@/config/index.config';
	export default {
		components: {
			VipAuth,
			Gift
		},
		data() {
			return {
				imgUrl: indexConfig.imgUrl,
				allNotice: false,
				allIntroduction: false,
				isBg: false,
				technicianTop: 0,
				technicianDetail: {
					id: "",
					headImg: ""
				},
				domList: [],
				tabId: 0,
				noticeHeight: 0,
				technicianList: [],
				
				tabIndex:1,
				formValue: {},
				listItems: [],
			};
		},
		computed: {
			isLogin() {
				return this.$mStore.state.accessToken
			},
			userInfo() {
				return this.$mStore.state.userInfo
			}
		},
		onLoad(option) {
			this.technicianDetail.id = option.id
		},
		onShow() {
			this.$http.get('/appNoAuth/store/massageTechnician/getInfo/' + this.technicianDetail.id).then(res => {
				if (!res){
					return
				}
				
				if (!res.data && res.msg == '已超出技师查看数量'){
					this.$refs.refVipAuth.init({content:'已超出技师查看数量',needBack:true,})
					return
				}
				
				if (res.massageTechnician && res.massageTechnician.recentPhoto) {
					res.massageTechnician.recentPhoto = res.massageTechnician.recentPhoto.split(',')
				}
				this.technicianDetail = res.massageTechnician
			})
			
			this.$http.get('/appNoAuth/store/serviceProject/list', {
				technicianId: this.technicianDetail.id,
			}).then(res => {
				this.technicianList = res.rows
			})
			
		},
		onReady() {
			
		},
		onPageScroll(e) {
			if (e.scrollTop > 30) {
				this.isBg = true
			} else {
				this.isBg = false
			}
		},
		methods: {
			placeOrder(item) {
				uni.navigateTo({
					url: '/pages/submitOrder/submitOrder?storeId=' + item.storeId + '&projectId=' + item.id +
						'&technicianId=' + this.technicianDetail.id
				})
			},
			
			onTabr(id) {
				this.tabId = id
				uni.pageScrollTo({
					scrollTop: this.domList[id],
					duration: 600
				});
			},
			gotoUrl(url, item) {
				uni.navigateTo({
					url: url

				})
			},
			goPosition() {
				if (!this.isLogin || !this.userInfo) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				
				if (!this.userInfo.level || parseInt(this.userInfo.level) < 2) {
					this.$refs.refVipAuth.init()
					return
				}
				
				uni.navigateTo({
					url: '/pages/u/position/index?technicianId='+this.technicianDetail.id
				})
			},
			initData() {
				this.formValue = {
					pageNum: 1,
					pageSize: 10,
					followType: this.tabIndex,
					// customerId: this.userInfo.id,
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.technicianDetail {
		.technicians {
			width: 100%;
			height: 330rpx;
			background: #fff;
			padding-bottom: 30rpx;
			overflow: hidden;

			.title {
				color: #666;
				font-size: 32rpx;
				border-bottom: 2rpx solid #f8f8f8;
				font-weight: 700;
				line-height: 80rpx;
				margin: 0 30rpx;
			}

			.scroll {
				width: 100%;
				white-space: nowrap;
				padding: 30rpx 0 0;
				height: 320rpx;

				.scroll-view-box {
					width: 100%;
					height: 100%;

					.item {
						width: 130rpx;
						height: 130rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: inline-block;
						vertical-align: middle;
						margin-right: 30rpx;

						&:first-child {
							margin-left: 30rpx;
						}


						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}
		}

		.notice {
			background: #fff;
			width: 100%;
			height: 420rpx;
			position: relative;
			box-sizing: border-box;
			padding: 0 40rpx 140rpx 30rpx;
			margin-bottom: 10rpx;
			overflow: hidden;

			.more {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;

				button {
					position: absolute;
					left: 50%;
					bottom: 26rpx;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #fff;
					border-radius: 32rpx;
					border: 1rpx solid #999;
					color: #999;
					font-size: 26rpx;

					&::after {
						content: " ";
						width: 200%;
						height: 200%;
						position: absolute;
						top: 0;
						left: 0;
						border: 1px solid rgba(0, 0, 0, .2);
						-webkit-transform: scale(.5);
						transform: scale(.5);
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
						box-sizing: border-box;
						border-radius: 20rpx;
					}
				}

				&::before {
					height: 140rpx;
					background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 45%, #fff);
					content: "";
					display: block;
					width: 100%;
				}
			}

			.title {
				color: #666;
				font-size: 32rpx;
				border-bottom: 1px solid #f8f8f8;
				font-weight: 700;
				line-height: 80rpx;
			}

			.text {
				padding: 30rpx 0;
				font-size: 26rpx;
				color: #666;
			}
		}

		.allNotice {
			height: auto !important;
		}

		.product {
			.item {
				width: 100%;
				height: 290rpx;
				background: #fff;
				margin-bottom: 10rpx;
				box-sizing: border-box;
				padding: 20rpx 40rpx 30rpx 26rpx;

				.btn {
					width: 140rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #d7b075, #aa8050);
					border-radius: 30rpx;
					line-height: 60rpx;
					color: #fff;
					font-size: 30rpx;

					&::after {
						content: " ";
						width: 200%;
						height: 200%;
						position: absolute;
						top: 0;
						left: 0;
						border: 1px solid rgba(0, 0, 0, .2);
						-webkit-transform: scale(.5);
						transform: scale(.5);
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
						box-sizing: border-box;
						border-radius: 20rpx;
					}
				}

				.info {
					color: #999;
					font-size: 26rpx;
					flex: 1;

					.count {
						margin-top: 32rpx;
					}

					.price {
						font-size: 22rpx;
						color: #e02020;

						span {
							font-size: 34rpx;
							font-weight: 700;
						}
					}

					.time {
						padding: 20rpx 0;
					}

					.name {
						color: #333;
						font-size: 30rpx;

						&::after {
							content: "";
							display: block;
							width: 12rpx;
							height: 20rpx;
							background: url(/static/grey-arrow-right.png) no-repeat;
							background-size: 100% auto;
							margin-left: 10rpx;
						}
					}
				}

				.img {
					width: 240rpx;
					height: 240rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}

		}

		.tabbar {
			width: 100%;
			height: 80rpx;
			background: #fff;
			border-bottom: 2rpx solid #f8f8f8;
			position: sticky;
			top: calc(var(--status-bar-height) + 88rpx);
			left: 0;
			z-index: 80;

			.label-pointer {
				flex: 1;
				text-align: center;
				line-height: 80rpx;
				color: #999;
				font-size: 30rpx;
			}

			.check {
				color: #aa8050;
			}
		}

		.reportTips {
			width: 100%;
			height: 114rpx;
			background: #fbf2de;
			color: #ceb479;
			font-size: 26rpx;
			box-sizing: border-box;
			padding: 20rpx 16rpx 20rpx 26rpx;
			margin-bottom: 10rpx;
		}

		.technician_datas {
			border-radius: 30rpx 20rpx 0 0;
			background: #fff;
			position: relative;
			z-index: 1;
			padding: 20rpx 30rpx;

			.album {
				width: 100%;
				box-sizing: border-box;

				.lbls {
					span {
						width: 130rpx;
						height: 40rpx;
						background: #fff;
						box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, .14);
						border-radius: 8rpx;
						color: #f94c02;
						font-size: 22rpx;
						white-space: nowrap;
						padding: 0 10rpx;

						&::before {
							content: "";
							display: block;
							width: 24rpx;
							height: 28rpx;
							background: url(/static/lbls.png) no-repeat;
							background-size: 100% auto;
							margin-right: 6rpx;
						}
					}
				}

				.introduce {
					color: #999;
					font-size: 28rpx;
					margin-bottom: 30rpx;

					span {
						color: #aa8050;
					}

					.text {
						width: 616rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.all {
						white-space: normal;
					}
				}

				.photos {
					width: 100%;
					white-space: nowrap;
					overflow-x: scroll;
					margin-bottom: 24rpx;

					.img {
						display: inline-block;
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						position: relative;
						margin-right: 20rpx;
						overflow: hidden;

						&:last-child {
							margin-right: 0rpx;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.datas {
				height: 94rpx;
				background: #fff9f4;
				border-radius: 20rpx;
				justify-content: space-between;
				padding: 0 40rpx;
				margin-bottom: 20rpx;

				.item {
					text-align: center;

					.pointer {
						color: #333;
						font-size: 26rpx;
						font-weight: 700;
						margin-bottom: 6rpx;
					}

					.label {
						color: #666;
						font-size: 22rpx;
					}
				}
			}
		}

		.top {
			width: 100%;
			height: calc(var(--status-bar-height) + 526rpx);
			position: relative;

			.inner {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 10;
				width: 100%;
				height: calc(var(--status-bar-height) + 460rpx);
				color: #fff;
				box-sizing: border-box;
				padding-top: var(--status-bar-height);

				.new_tabbar {
					padding: 70rpx 0 36rpx;

					.uni-label-pointer {
						width: 204rpx;
						color: #fff;
						font-size: 26rpx;
						text-align: center;
					}

					.check {
						font-size: 34rpx;
						font-weight: 700;
					}
				}

				.info {
					position: relative;
					padding: 180rpx 0 0 20rpx;
					align-items: flex-start !important;

					.rightBtns {
						.btn {
							width: 134rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							background: #fff;
							border-radius: 30rpx 0 0 30rpx;
							font-size: 26rpx;
							color: #666;

							&::before {
								content: "";
								width: 26rpx;
								height: 24rpx;
								display: block;
								margin-right: 10rpx;
							}

							&:first-child {
								margin-bottom: 30rpx;

								&::before {
									background: url(/static/shop-icon1.png) no-repeat;
									background-size: 100% auto;
								}
							}

							&:last-child::before {
								background: url(/static/liwu.png) no-repeat;
								background-size: 100% auto;
							}
						}
					}

					.right {
						flex: 1;
						font-size: 28rpx;

						.kaopu {
							width: 82rpx;
							height: 15px;
							background: url(/static/kaopu.png) no-repeat;
							background-size: 100% auto;
							margin-right: 10rpx;
						}

						.location {
							font-size: 22rpx;
							margin-right: 34rpx;

							&::after {
								content: "";
								width: 8rpx;
								height: 14rpx;
								background: url(/static/white-arrow-right.png) no-repeat;
								background-size: 100% auto;
								margin-left: 10rpx;
							}

							&::before {
								content: "";
								width: 10px;
								height: 12px;
								background: url(/static/weizhi.png) no-repeat;
								background-size: 100% auto;
								margin-right: 5px;
							}
						}

						.tag {
							font-size: 20rpx;
							margin-bottom: 10rpx;

							&::before {
								content: "";
								width: 22rpx;
								height: 22rpx;
								background: url(/static/zizhi.png) no-repeat;
								background-size: 100% auto;
								margin-right: 10rpx;
							}
							text{
								padding: 0 10rpx;
							}
						}

						.contrast {
							margin: 10rpx 0;
							line-height: 38rpx;
						}

						.name {
							font-size: 34rpx;

							.uni-label-pointer {
								font-weight: 700;
								margin-right: 24rpx;
							}

							.distance {
								padding: 0 20rpx;
								height: 40rpx;
								background: hsla(0, 0%, 100%, .3);
								font-size: 22rpx;
								color: #fff;
								border-radius: 30rpx;
							}
						}
					}

					.avatar {
						width: 188rpx;
						height: 188rpx;
						background: #fff;
						position: relative;
						border-radius: 50%;
						margin-right: 22rpx;
						border-radius: 50%;
						border: 2rpx solid #ffffff;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}

						.uni-label-pointer {
							position: absolute;
							left: 50%;
							bottom: 0;
							-webkit-transform: translate(-50%, 50%);
							transform: translate(-50%, 50%);
							width: 120rpx;
							height: 50rpx;
							color: #fff;
							text-align: center;
							line-height: 50rpx;
							background: linear-gradient(90deg, #d7b075, #aa8050);
							border-radius: 30rpx;
							font-size: 24rpx;
						}
					}
				}
			}

			.tips {
				position: absolute;
				left: 30rpx;
				top: calc(var(--status-bar-height) + 88rpx);
				width: 690rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: linear-gradient(270deg, rgba(235, 158, 253, 0), rgba(230, 146, 252, .126) 21%, rgba(210, 101, 249, .15));
				border-radius: 30rpx;
				color: #c28fce;
				z-index: 9;
				box-sizing: border-box;
				padding: 0 20rpx;
				font-size: 24rpx;

				&::before {
					width: 20rpx;
					height: 24rpx;
					background: url(/static/lingdang.png) no-repeat;
					background-size: 100% auto;
					content: "";
					margin-right: 10rpx;
				}
			}

			.back {
				width: 100%;
				height: calc(var(--status-bar-height) + 560rpx);
				object-fit: cover;
				display: inline-block;
				overflow: hidden;
				position: relative;
			}
		}
	}
</style>
